<template>
	<view class="content font_family">
		<view class="header f_j" :style="{backgroundImage:`url(${beasurl}assets/addons/fzsc/img/me_bg.png)`}">
			<view class="avatar">
				<u-avatar v-if="user_info" @click="go('/pages/my_msg/my_msg')" size="140rpx" mode="aspectFill"
					:src="user_info.avatar"></u-avatar>
				<u-avatar @click="go('/pages/login/login')" v-else size="140rpx" mode="aspectFill" src=""></u-avatar>
			</view>
			<view v-if="user_info" class="name" @click="go('/pages/my_msg/my_msg')">{{user_info.username}}</view>
			<view v-else class="name" @click="go('/pages/login/login')">请登录</view>
		</view>
		<view class="box">
			<view class="my_order_box">
				<view class="title f_z_b" @click="login_go('/pages/order/order')">
					<view class="left">我的订单</view>
					<view class="right f_j">
						<text class="text">全部</text>
						<image src="../../static/public/go_h.png" mode=""></image>
					</view>
				</view>
				<view class="menu f_z_b">
					<view class="item f_d f_j" v-for="(item, index) in order_menu" :key="index"
						@click="login_go(`/pages/order/order?index=${index+1}`)">
						<image :src="item.icon" mode=""></image>
						<view class="text">
							{{ item.title }}
						</view>
						<view class="tag f_zj" v-if="user_info.ar[index]>0">
							{{user_info.ar[index]}}
						</view>
					</view>
				</view>
				<!-- 收货提示 -->
				<!-- <view class="sh_tip f_j">
					<image src="https://imgs.699pic.com/images/501/120/680.jpg!list2x.v1" mode="aspectFill"></image>
					<view class="msg">
						<view class="yj">
							<text>已发货</text>
							<text class="yj_text">预计明天送达</text>
						</view>
						<view class="address">您的快递即将前往淮安</view>
					</view>
					<view class="time">10:40</view>
				</view> -->
			</view>
			<!-- 我的信息 -->
			<view class="my_msg_box">
				<view class="title">
					我的信息
				</view>
				<view class="menu">
					<view class="item f_j" v-for="(item,index) in msg_menu" :key="index" @click="login_go(item.url)">
						<image class="icon" :src="item.icon" mode=""></image>
						<view class="title">
							{{item.title}}
						</view>
						<image class="go" src="../../static/public/go_h.png" mode=""></image>
					</view>
					<view class="item f_j" @click="go('/pages/my_msg/cj_wt')">
						<image class="icon" src="../../static/me/wt.png" mode=""></image>
						<view class="title">
							常见问题
						</view>
						<image class="go" src="../../static/public/go_h.png" mode=""></image>
					</view>
					<button class="item f_j" open-type="contact">
						<image class="icon" src="../../static/public/kf_h.png" mode=""></image>
						<view class="title">
							联系客服
						</view>
						<image class="go" src="../../static/public/go_h.png" mode=""></image>
					</button>
					<view class="item f_j" @click="go_xcx">
						<image class="icon" src="../../static/me/sqgy.png" mode=""></image>
						<view class="title">
							成为供应商
						</view>
						<image class="go" src="../../static/public/go_h.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapActions } from 'vuex'
	import { common } from '../../api/public';
	export default {
		computed: {
			...mapState(['user_info', 'dl_id', 'common'])
		},
		data() {
			return {
				beasurl: '',
				order_menu: [
					{ title: '待付款', icon: '../../static/me/dfk.png' },
					{ title: '配货中', icon: '../../static/me/dfh.png' },
					{ title: '已发货', icon: '../../static/me/dsh.png' },
					{ title: '待评价', icon: '../../static/me/dpj.png' }
				],
				msg_menu: [
					{ title: '我的设置', icon: '../../static/me/sz.png', url: '/pages/my_msg/my_msg' },
					{ title: '收货信息', icon: '../../static/me/shxx.png', url: '/pages/my_msg/sh_address' },
					{ title: '我的收藏', icon: '../../static/me/mesz.png', url: '/pages/my_msg/my_sc' },
					{ title: '我的评价', icon: '../../static/me/mepj.png', url: '/pages/my_msg/my_pl' },
					{ title: '我的优惠券', icon: '../../static/me/w_yhq.png', url: '/pages/my_msg/my_yhq' },
					{ title: '优惠券中心', icon: '../../static/me/yhq.png', url: '/pages/my_msg/yhq' }
				]
			};
		},
		onShow() {
			this.car_deg()
			if (this.user_info) {
				this.get_user()
			}
		},
		onLoad() {
			this.beasurl = this.$beasUrl
		},
		methods: {
			...mapActions(['get_user']),
			go_xcx() {
				// if (!this.user_info) {
				// 	this.me_show_toast('请先登录')
				// 	return
				// }
				uni.navigateToMiniProgram({
					appId: this.common.gy_appid,
					envVersion: 'trial'
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		.header {
			width: 100%;
			height: 386rpx;
			// background: #f3553d;
			background-repeat: no-repeat;
			background-size: 100%;

			.avatar {
				margin-left: 56rpx;
				border-radius: 50%;
				border: 1rpx solid #ffffff;
			}

			.name {
				font-weight: normal;
				font-size: 40rpx;
				color: #ffffff;
				margin-left: 26rpx;
			}
		}

		.box {
			margin-top: -50rpx;
			padding: 30rpx;
			padding-top: 0rpx;

			.my_order_box {
				padding: 30rpx;
				background: #ffffff;
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.title {
					.left {
						font-weight: normal;
						font-size: 36rpx;
						color: #232323;
					}

					.right {
						.text {
							font-weight: normal;
							font-size: 24rpx;
							color: #999999;
						}

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}

				.menu {
					margin-top: 30rpx;

					.item {
						position: relative;

						image {
							width: 46rpx;
							height: 44rpx;
						}

						.text {
							margin-top: 15rpx;
							font-weight: normal;
							font-size: 24rpx;
							color: #232323;
						}

						.tag {
							width: 20rpx;
							padding: 4rpx 8rpx;
							position: absolute;
							top: -20rpx;
							right: -10rpx;
							background: #F54D4D;
							border-radius: 16rpx 16rpx 16rpx 0rpx;
							font-weight: 400;
							font-size: 18rpx;
							color: #FFFFFF;
						}
					}
				}

				.sh_tip {
					margin-top: 30rpx;
					background: #f8f8f8;
					border-radius: 16rpx 16rpx 16rpx 16rpx;

					image {
						width: 88rpx;
						height: 88rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
					}

					.msg {
						margin-left: 20rpx;

						.yj {
							font-weight: normal;
							font-size: 28rpx;
							color: #000000;

							.yj_text {
								font-weight: normal;
								font-size: 24rpx;
								color: #666666;
							}
						}

						.address {
							font-weight: normal;
							font-size: 22rpx;
							color: #999999;
						}
					}

					.time {
						margin-left: auto;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						margin-right: 20rpx;
					}
				}
			}

			.my_msg_box {
				margin-top: 30rpx;
				padding: 30rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.title {
					font-weight: normal;
					font-size: 32rpx;
					color: #3D3D3D;
				}

				.menu {
					.item {
						padding: 22rpx 0rpx;

						.icon {
							width: 44rpx;
							height: 44rpx;
						}

						.title {
							margin-left: 30rpx;
							font-weight: normal;
							font-size: 28rpx;
							color: #232323;
						}

						.go {
							margin-left: auto;
							width: 30rpx;
							height: 30rpx;
						}
					}

					button {
						background: none;
						line-height: normal;
					}

					button::after {
						border: none;
					}
				}
			}
		}
	}
</style>